<template>
	<div class="doc_app">
		<Menu
			obj-key="label"
			:data="menus"
			class="doc-menu"
		>
			<template #item="{value,item:{raw:{name},key},active}">
				<MenuItem
					:active="active===key"
					:name="name"
					:value="value"
				/>
			</template>
		</Menu>
		<div class="doc-body">
			<router-view/>
		</div>
	</div>
</template>

<script setup>
import menus from './menus';
import MenuItem from './components/MenuItem';
import {Menu} from 'powerful-ui/pc-default';
</script>

<style lang="scss">
.doc_app{
	height:100vh;
	display:flex;
	>.doc-menu{
		width:200px;
		height:100%;
		flex-shrink:0;
	}
	>.doc-body{
		flex-grow:1;
		flex-basis:0;
		height:100%;
		background:#fafafa;
		overflow:auto;
	}
}
</style>
